<template>
  <view>

    <view class="tn-p" style="background-color: #FCA659; border-radius: 0 0 20px 20px;">
      <view class="tn-flex" @click="!$user.userInfo.id && $user.getUserInfo()">
        <view class="tn-flex tn-flex-center-start tn-flex-1">
          <wd-img custom-class="tn-shadow" custom-image="tn-white_bg"
                  :width="60" :height="60" round
                  :src="$user.userInfo?.avatar||defaultAvatar">
            <template #error>
              <view class="tn-w-full tn-h-full tn-white_bg"></view>
            </template>
          </wd-img>
          <view class="tn-ml tn-text-bold tn-text-xl tn-white_text">{{ $user.userInfo?.nickname }}</view>
        </view>
        <view>

        </view>
      </view>
      <wd-gap height="60px"></wd-gap>
    </view>

    <view class="tn-m tn-p tn-shadow tn-radius tn-white_bg" style="margin-top: -40px">
      <view class="tn-pb tn-text-bold">我的订单</view>
      <wd-grid square :column="5" clickable>
        <wd-grid square :column="5" clickable>
          <wd-grid-item v-for="item in orderNavOptions" :text="item.title" :url="item.url">
            <template #icon>
              <wd-icon class-prefix="custom" :name="item.icon" size="30px"/>
            </template>
          </wd-grid-item>
        </wd-grid>
      </wd-grid>
    </view>


    <view class="tn-m tn-mt-xl tn-p tn-shadow tn-radius tn-white_bg">
      <view class="tn-pb tn-text-bold">热门工具</view>
      <wd-grid square :column="5" clickable>
        <wd-grid-item v-for="item in toolsNavOptions" :text="item.title" :url="item.url">
          <template #icon>
            <wd-icon class-prefix="custom" :name="item.icon" size="30px"/>
          </template>
        </wd-grid-item>
      </wd-grid>
    </view>

  </view>
</template>

<script setup lang="ts">
import {$user} from "@/store"
import {onLoad} from "@dcloudio/uni-app";
import {orderNavOptions, toolsNavOptions} from "@/pages/home/data";
import {defaultUserInfo} from "@/store/modules/user";
import {parseQueryString} from "@/utils/common";
import {scanInventionCode} from "@/api/invention";
import {removeInviteeCode} from "@/utils/invite";

const defaultAvatar = defaultUserInfo?.avatar

/**
 * 页面加载
 */
onLoad(async (e) => {
  // 处理推广码进入
  let scene = decodeURIComponent(e?.scene)
  await inventionCodeHandler(scene)
  // 获取用户信息
  await $user.getUserInfo()
  // 获取支付钱包
  await $user.getPayWallet()
})

/**
 * 推广码处理
 */
async function inventionCodeHandler(scene: string) {
  // 处理扫描推广码，如果推广码异常，删除推广码
  let inviteCode = parseQueryString(scene)['inviteCode']
  inviteCode && scanInventionCode(inviteCode)
      .catch(() => removeInviteeCode())
}

</script>

<style>
@import '@/iconfont/home/iconfont.css';
</style>
